<section class="todoapp">
  <header class="header">
    <h1>todos</h1>
    <input type="text" class="new-todo" placeholder="What needs to be done?"
           autofocus [(ngModel)]="newTodoText" (keyup.enter)="addTodo()">
  </header>

  <section class="main" *ngIf="(todos$ | async).size > 0">
    <ng-container *ngIf="(todos$ | async).size">
      <input #toggleAll type="checkbox" class="toggle-all" [checked]="allCompleted$ | async">
      <label (click)="setAllTo(toggleAll.checked)"></label>
    </ng-container>

    <ul class="todo-list">
      <li *ngFor="let todo of todos$ | async; trackBy: trackById" [class.completed]="todo.completed"
          [class.editing]="todo.editing">
        <div class="view">
          <input type="checkbox" class="toggle" (click)="toggleCompletion(todo)" [checked]="todo.completed">
          <label (dblclick)="editTodo(todo)">{{todo.title}}</label>
          <button class="destroy" (click)="remove(todo)"></button>
        </div>
        <div *ngIf="todo.editing">
          <input #editedTodo type="text" class="edit" [value]="todo.title"
                 (blur)="stopEditing(todo, editedTodo.value)"
                 (keyup.enter)="updateEditingTodo(todo,editedTodo.value)"
                 (keyup.escape)="cancelEditingTodo(todo)">
        </div>
      </li>
    </ul>
  </section>

  <footer class="footer" *ngIf="todos$ | async">
    <span class="todo-count"><strong>remaining length</strong> left</span>
    <button class="clear-completed" *ngIf="todos$ | async"
            (click)="removeCompleted()">
      Clear completed
    </button>
  </footer>
</section>
